<template>
  <div class="table-page">
    <GiTable
      row-key="userWechatGroupId"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @sorter-change="onSorterChange"
      @refresh="getTableData"
      :simple="true"
    >
      <template #custom-extra>
        <a-form
          label-align="right"
          layout="inline"
          auto-label-width
          :model="listParams"
          size="small"
          class="form my-10"
        >
          <a-form-item field="currentStatus">
            <template #label> <span class="font-bold">功能状态：</span> </template>
            <a-switch
              type="round"
              checked-color="#F53F3F"
              unchecked-color="#c9cdd4"
              disabled
              :checked-value="1"
              :unchecked-value="0"
              :model-value="tableData[0]?.isOpen ?? 0"
            >
              <template #checked> 开启中 </template>
              <template #unchecked> 未开启 </template>
            </a-switch>
            <a-divider direction="vertical" class="ml-20" />
          </a-form-item>
          <a-form-item field="isOpen" label="是否开启">
            <a-select v-model="listParams.isOpen" @change="getTableData" placeholder="请选择" class="w-30n" allow-clear>
              <a-option value="">全部</a-option>
              <a-option :value="0">未开启</a-option>
              <a-option :value="1">开启中</a-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" size="small" @click="getTableData">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button size="small" @click="onResetSearch">
                <template #icon>
                  <icon-sync />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
      <template #keyword="{ record }">
        <a-tag class="mr-m" v-for="(item, index) in record.keyword" :key="index">{{ item }}</a-tag>
      </template>
      <template #supconListenGroup="{ record }">
        <div class="group-">
          <a-table :columns="groupColumns" :data="record.supconListenGroup" :pagination="false">
            <template #preview="{ record }">
              <a-button type="text" @click="preview(record.supconListenGroupId, record.groupHeadImg, record.groupName)">
                <template #icon><icon-eye /></template>
                预览
              </a-button>
            </template>
          </a-table>
        </div>
      </template>
    </GiTable>
    <Preview ref="PreviewRef" />
  </div>
</template>

<script setup>
import { detailSupconInfo } from '@/apis'
import { deleteEmpty } from '@/utils/common'
import Preview from './Preview.vue'

const props = defineProps(['userWechatId'])
const columns = ref([
  {
    title: '检测转发群',
    tooltip: true,
    ellipsis: true,
    width: 200,
    dataIndex: 'supconGroupName',
    align: 'center'
  },
  {
    title: '检测关键字',
    width: 200,
    slotName: 'keyword',
    align: 'center'
  },
  {
    title: '用户群信息',
    width: 400,
    slotName: 'supconListenGroup',
    align: 'center'
  }
])

const groupColumns = ref([
  {
    title: '群名称',
    width: 200,
    dataIndex: 'groupName'
  },
  {
    title: '操作',
    width: 100,
    align: 'center',
    slotName: 'preview'
  }
])

const loading = ref(false)
const tableData = ref([])
const PreviewRef = ref()

const listParams = reactive({
  userWechatId: undefined,
  isOpen: undefined
})

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.userWechatId = props.userWechatId
    const res = await detailSupconInfo(deleteEmpty(listParams))
    tableData.value = [res.data]
  } finally {
    loading.value = false
  }
}

watch(
  () => props.userWechatId,
  () => {
    getTableData()
  },
  { deep: true, immediate: true }
)

//升降序发生改变
const onSorterChange = (dataIndex, direction) => {
  listParams.orderBy = direction ? (direction === 'ascend' ? 'asc' : 'desc') : undefined
  listParams.sort = listParams.orderBy ? dataIndex : undefined
  getTableData()
}

// 列表重置搜索
const onResetSearch = () => {
  listParams.title = listParams.status = undefined
  getTableData()
}

// 跟预览
const preview = (supconListenGroupId, groupHeadImg, groupName) => {
  PreviewRef.value?.openModal(supconListenGroupId, groupHeadImg, groupName)
}
</script>

<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
.bgf7 {
  background: #f7f7f7;
}
.max-800 {
  max-width: 800px;
}
.group- {
  :deep(.arco-table-container) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-2);
  }
}
.max-200 {
  max-width: 300px;
}
</style>
